import {Radio} from "antd";
import "./css/SelectRadio.less";
import React, {FC, useCallback, useEffect, useMemo, useRef, useState} from "react";
import useStateRef from "../../customUse/useStateRef.tsx";
import {AxiosGet} from "../../services/HttpService.tsx";
import {getObjByRule,} from "../../utils";
import Config from "../../Config.tsx";

interface SelectRadioProps {
    ds?: any,
    menuId: string,
    options: any[],
    url: string,
    params: any,
    format: any,
    value: string,
    labelKey: string,
    valueKey: string,
    disabled: boolean,
    isButton: boolean,
    defaultValue?: any
    onChange?: Function,
    className?: string
}

const SelectRadio: FC<SelectRadioProps> = (props) => {
    const selectOptionRef = useRef();
    const [selectOption, setSelectOption] = useStateRef([], selectOptionRef),
        [value, setValue] = useState<any>(false);

    const loadOption = useCallback(async () => {
        const {format = {id: "id", value: "id", label: "zhCn|usEn|ptBr"}, params = {}}: {
            format: any,
            params: any
        } = props;
        let options: any[] = [];
        if (props.url) {
            const {data = []}: { data: any[] } = await AxiosGet(props.url, {
                ...params,
                [Config.axiosSerMenuKey]: props.menuId
            });
            options = data;
        } else if (props.options) {
            options = props.options || [];
        }
        options = options.map(node => {
            const item: any = getObjByRule(node, {
                id: "id",
                value: "value",
                label: "zhCn|usEn|ptBr",
                ...format
            }, true);
            return {
                ...item
            }
        })
        setSelectOption(options);
    }, [props.options, props.url, props.params, props.menuId]);

    useEffect(() => {
        loadOption();
    }, []);

    useEffect(() => {
        const {ds = {}, defaultValue = false}: { ds: any, defaultValue: any } = props;
        let newValue = ds.value || props.value || defaultValue;
        setValue(newValue);
        props.onChange && props.onChange(newValue);
    }, [props.ds]);

    const handelChange: Function = useCallback((e: any) => {
        setValue(e.target.value);
        props.onChange && props.onChange(e.target.value);
    }, [props.onChange]);


    const renderSelectRadio = useMemo(() => {
        if (!selectOptionRef.current) {
            return null
        }
        const {value, defaultValue = false, labelKey = "label", valueKey = "value", disabled, isButton = false}:
            {
                value: any,
                defaultValue: any,
                labelKey: string,
                valueKey: string,
                disabled: boolean,
                isButton: boolean
            } = props;

        return (
            <div
                className={"sf_core_select_radio " + (isButton ? "select_radio_button" : "") + (disabled ? "select_radio_disabled" : "") + ' ' + props.className}>
                <Radio.Group value={value || defaultValue} onChange={handelChange}
                             disabled={props.disabled}>
                    {
                        selectOptionRef.current.map((item: any) => {
                            if (isButton) {
                                return (
                                    <Radio.Button key={item[valueKey]}
                                                  value={item[valueKey]}>{item[labelKey]}</Radio.Button>
                                )
                            }
                            return (
                                <Radio key={item[valueKey]} value={item[valueKey]}>{item[labelKey]}</Radio>
                            )
                        })
                    }
                </Radio.Group>
            </div>
        )
    }, [selectOption, value, props.disabled]);

    return (renderSelectRadio);
};


export default React.memo(SelectRadio);